// @flow
import React from 'react';
import OutsideClickHandler from 'react-outside-click-handler';
import UserMenuItem from 'components/Header/UserMenuItem';
import './UserMenuList.scss';

type Props = {
  onClick(): void,
  onLogout(): Promise<*>,
  menuListOutClickHandle(): void,
  username: string,
};

const UserMenuList = ({ onClick, onLogout, username, menuListOutClickHandle }: Props) => {
  return (
    <OutsideClickHandler onOutsideClick={() => menuListOutClickHandle()}>
      <div className="user-menu-list-wrapper">
        <div className="user-menu-list-positioner">
          <div className="user-menu" onClick={onClick}>
            <div className="me">
              <div className="username">
@
                {username}
              </div>
            </div>
            <div className="menu-items">
              <UserMenuItem to="/things">Things</UserMenuItem>
              <UserMenuItem>预测</UserMenuItem>
              <div className="separator" />
              <UserMenuItem to="/setting">设置</UserMenuItem>
              <UserMenuItem onClick={onLogout}>退出</UserMenuItem>
            </div>
          </div>
        </div>
      </div>
    </OutsideClickHandler>
  );
};
export default UserMenuList;
